<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>员工信息</title>
    <link rel="stylesheet" href="./common/element/element.css">
</head>

<body>
    <div id="app">
        <h2>员工信息</h2>
        <el-row>
            <el-col :span="18" style="margin-bottom: 10px">
                <el-input v-model="query.employid" style="width: 160px;" placeholder="请输入员工号"></el-input>
                <el-input v-model="query.employname" style="width: 160px;" placeholder="请输入姓名"></el-input>
                <el-select v-model="query.deptid" placeholder="请选择部门">
                    <el-option
                      v-for="dept in depts"
                      :key="dept.deptid"
                      :label="dept.deptname"
                      :value="dept.deptid">
                    </el-option>
                </el-select>

                <el-select v-model="query.dutyid" placeholder="请选择职务">
                    <el-option
                      v-for="dept in depts"
                      :key="dept.deptid"
                      :label="dept.deptname"
                      :value="dept.deptid">
                    </el-option>
                </el-select>

                <el-button type="info" >查询</el-button>
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button type="success" >刷新</el-button>
                <el-button type="warning" >批量删除</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" stripe border style="width: 99%">
            <el-table-column type="selection" width="45" align="center"></el-table-column>
            <el-table-column prop="eno" label="员工号" align="center"></el-table-column>
            <el-table-column prop="employname" label="姓名" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center"></el-table-column>
            <el-table-column prop="deptname" label="所在部门" align="center"></el-table-column>
            <el-table-column prop="dutyname" label="职务" align="center"></el-table-column>
            <el-table-column prop="xueli" label="学历" align="center"></el-table-column>
            <el-table-column prop="graduate" label="毕业院校" align="center"></el-table-column>
            <el-table-column prop="contact" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="address" label="联系地址" align="center"></el-table-column>
            <el-table-column prop="workdate" label="入职日期" align="center"></el-table-column>
            <el-table-column prop="memo" label="备注" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template slot-scope="scope">

                    <el-button type="primary" icon="el-icon-edit" size="small" circle @click="dialogVisible = true">
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
                :page-size="pageSize">
            </el-pagination>
        </el-row>

        <el-dialog title="员工信息" :visible.sync="dialogVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="员工号">
                    <el-input v-model="form.eno" readonly></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.employname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="form.sex" label="男">男</el-radio>
                    <el-radio v-model="form.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="所在部门">
                    <el-select v-model="form.deptid" filterable placeholder="请选择所在部门" value-key="deptid">
                        <el-option v-for="item in dept" :key="item.deptid" :label="item.deptname" :value="item.deptid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职务">
                    <el-select v-model="form.dutyid" filterable placeholder="请选择职务" value-key="dutyid">
                        <el-option v-for="item in duty" :key="item.dutyid" :label="item.dutyname" :value="item.dutyid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历">
                    <el-input v-model="form.xueli" placeholder="请输入学历"></el-input>
                </el-form-item>
                <el-form-item label="毕业院校">
                    <el-input v-model="form.graduate" placeholder="请输入毕业院校"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="form.contact" placeholder="请输入联系方式"></el-input>
                </el-form-item>
                <el-form-item label="联系地址">
                    <el-input v-model="form.address" placeholder="请输入联系地址"></el-input>
                </el-form-item>
                <el-form-item label="入职日期">
                    <el-date-picker v-model="form.workdate" type="date" value-format="yyyy-MM-dd" placeholder="请选择入职日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.memo" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script src="./common/js/jquery-1.9.0.min.js"></script>
    <script src="./common/js/vue.js"></script>
    <script src="./common/js/axios.min.js"></script>
    <script src="./common/element/element.js"></script>
    <script>
        const vue = new Vue({
            el: '#app', 
            data: { 
                depts:[
                    {
                        'deptid':1,
                        'deptname':'aa'
                    },
                    {
                        'deptid':2,
                        'deptname':'bb'
                    },
                    {
                        'deptid':3,
                        'deptname':'cc'
                    }
                ],
                tableData: [], //列表数据
                pageSize: 8, // 每页显示行数
                pageNum: 1, // 页码
                total: 0, //数据总数
                dialogVisible: false, //增、改对话框是否显示
                form: {}, // 表单数据
                query: {  // 查询关键字
                    employid: '',
                    employname: '',
                    deptid: '',
                    dutyid: ''
                },
            },
            created(){
                getDeptList()
            },
            methods:{
                async getDeptList(){
                    const {data:res} = await axios.get('http://localhost:8080/dept/list')
                    this.depts = res.data
                }
            }
        });
    </script>


</body>

</html>